import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'umi';
import styles from './questionTypes.less';
import { Form, Input, Button, message } from 'antd';

const questionTypes: React.FC = () => {
  let dispatch = useDispatch();
  const [flag, setFlag] = useState<boolean>(false);
  const [form] = Form.useForm();
  const inputLayout = {
    wrapperCol: { span: 24 },
  };
  const { list } = useSelector(
    (models) => (models as { user: { list: object[] } }).user,
  );
  useEffect(() => {
    dispatch({
      type: 'user/getList',
    });
    dispatch({
      type: 'question/getQuestionType',
    });
  }, [flag]);
  function addTypes() {
    setFlag(true);
  }
  function onFinish(value: { text: string; sort: number }) {
    let values = value;
    let num = list.length + 1;
    values = {
      ...values,
      sort: num,
    };
    let result = dispatch({
      type: 'question/insertQuestionsType',
      payload: values,
    });
    ((result as unknown) as Promise<{ code: number; msg: string }>).then(
      (res) => {
        if (res.code === 1) {
          message.success(res.msg);
          setFlag(false);
        } else {
          message.error(res.msg);
          setFlag(true);
        }
        form.resetFields();
      },
    );
  }
  function cancel() {
    setFlag(false);
  }
  return (
    <div className={styles.wrap}>
      <h1>试题分类</h1>
      <div className={styles.box}>
        <button className={styles.btn} onClick={addTypes}>
          + 添加试题
        </button>
        <div className={styles.head}>
          <span>类型ID</span>
          <span>类型名称</span>
          <span>操作</span>
        </div>
        <div className={styles.body}>
          {list &&
            list.map((item, index) => {
              return (
                <div key={index}>
                  <div>
                    <span>
                      {
                        (item as { questions_type_id: string })
                          .questions_type_id
                      }
                    </span>
                    <span>
                      {
                        (item as { questions_type_text: string })
                          .questions_type_text
                      }
                    </span>
                  </div>
                </div>
              );
            })}
        </div>
      </div>
      {flag && (
        <div className={styles.shade}>
          <div>
            <Form
              onFinish={onFinish}
              form={form}
              initialValues={{
                text: '',
              }}
            >
              <h3>创建新类型</h3>
              <Form.Item
                name="text"
                rules={[{ required: true, message: '请输入类型名称!' }]}
                {...inputLayout}
              >
                <Input placeholder="请输入类型名称" className={styles.input} />
              </Form.Item>
              <div className={styles.btns}>
                <Button className={styles.sub} type="primary" htmlType="submit">
                  确认
                </Button>
                <input
                  type="button"
                  value="取消"
                  className={styles.none}
                  onClick={cancel}
                />
              </div>
            </Form>
          </div>
        </div>
      )}
    </div>
  );
};

export default questionTypes;
